<template>
  <div class="grid-content bg-purple">
    <div class="header">
      <p>
        执行中任务
        <el-tooltip placement="top" effect="light">
          <div slot="content">
            运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）<br>派送率=派送中/(待派送+派送中+已签收+拒收）
          </div>
          <img src="@/assets/wen.png" alt="">
        </el-tooltip>
      </p>
      <div class="refresh-box">2023-05-19 21:34</div>
    </div>
    <div class="ball-chart-box">
      <el-row :gutter="55">
        <el-col
          :span="12"
        ><div>
          <echarts-four :one="42" />
          <div class="item">
            <span class="s1">待取件</span><span class="s2">53</span>
          </div>
        </div>
        </el-col>
        <el-col
          :span="12"
        ><div>
          <echarts-four :one="32" />
          <div class="item">
            <span class="s1">待派件</span><span class="ss2">34</span>
          </div>
        </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echartsFour from './echartsFour.vue'
export default {
  components: { echartsFour }
}
</script>

<style lang="scss" scoped>
.grid-content {
  // height: 230px;
  border-radius: 4px;
  min-height: 36px;
  font-size: 16px;
  padding: 23px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    p {
      font-size: 16px;
      font-weight: 700;
      img {
        width: 20px;
        height: 20px;
        margin-left: 6px;
      }
    }
  }
  .ball-chart-box {
    position: relative;
    width: 407px;
    height: 220px;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    // margin-top: 15px;
    display: flex;
    justify-content: center;
    .el-row {
      .item {
        margin-top: 20px;
        text-align: center;
        font-weight: 700;
        font-size: 16px;
      }
      .s1{
      margin-right: 7px;
      color: #303133;
    }
    .s2{
      color: #e15536;
    }
    .ss2{
      color: #ffc257;
    }
    }
  }
}
</style>
